<!-- 培训总览 -->
<template>
  <px-dialog v-model="visible" title="考试总览" width="1200" @close="cancel">
    <div class="mg-b-8">考试名称：{{ allData.examName }}</div>
    <div class="mg-b-8">
      <span class="mg-r-8">考试人数：{{ allData.examineeQuantity }}</span>
      <span class="mg-r-8">平均分：{{ allData.average }}</span>
      <span class="mg-r-8">最高分：{{ allData.maxScore }}</span>
      <span>最低分：{{ allData.minScore }}</span>
    </div>
    <div v-loading="loading" class="flex-center">
      <div class="chart-container">
        <div class="chart-bar mg-b-8">
          <div class="chart-title">状态分布</div>
          <div ref="statusChartRef" class="chart-ref" />
        </div>
        <div class="chart-bar">
          <div class="chart-title">成绩分布</div>
          <div ref="scoreChartRef" class="chart-ref" />
        </div>
      </div>
      <div class="table-container">
        <px-table height="490" :data="tableData" size="small" border class="common-table">
          <px-table-column prop="rank" label="排名" min-width="120" show-overflow-tooltip />
          <px-table-column prop="examineeName" label="姓名" min-width="120" show-overflow-tooltip />
          <px-table-column prop="workNo" label="工号" min-width="120" show-overflow-tooltip />
          <px-table-column prop="score" label="总分" min-width="120" show-overflow-tooltip />
        </px-table>
      </div>
    </div>
  </px-dialog>
</template>

<script setup>
import { computed, ref, reactive, toRefs, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getExamLedgerOverviewAPI } from "@/api/knowledge/examManage";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const statusChartRef = ref();
const scoreChartRef = ref();

const state = reactive({
  loading: false,
  allData: {},
  statusPieData: [],
  scorePieData: [],
  tableData: []
});
const { allData, loading, tableData } = toRefs(state);

onMounted(() => {
  handleQuery();
});

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      examId: props.rowData.examId
    };
    const res = await getExamLedgerOverviewAPI(params);
    state.allData = res;
    state.statusPieData = res.stat?.map(item => {
      return {
        name: item.name,
        value: item.valueScore
      };
    });
    state.scorePieData = res.transcripts?.map(item => {
      return {
        name: item.name,
        value: item.valueScore
      };
    });
    state.tableData = res.examinees;
    nextTick(() => {
      initChart(statusChartRef.value, state.statusPieData);
      initChart(scoreChartRef.value, state.scorePieData);
    });
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const initChart = (dom, data) => {
  let chartInstance = null;
  chartInstance = echarts.init(dom);
  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };
  nextTick(() => {
    chartInstance.setOption(option);
  });
};

const cancel = () => {
  emits("update:visible", false);
};

// onUnmounted(() => {
//   chartInstance && chartInstance.dispose();
// });
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");

.chart-bar {
  border: 1px solid #dfdfdf;
}

.chart-container {
  width: 400px;
  margin-right: 8px;
}

.table-container {
  width: calc(100% - 408px);
}

.chart-title {
  padding: 8px;
  font-weight: bold;
  color: #000;
  background: #ebf2fe;
  border-bottom: 1px solid #dfdfdf;
}

.chart-ref {
  width: 400px;
  height: 200px;
}
</style>
